<template>
  <div class="module">
      <div class="header">
        <span><i class="iconfont iconyonghu1"></i>欢迎您<em>{{userInfo.username}}!</em><el-button size="small" icon="iconfont iconback" circle @click="()=>{$router.push({name: 'login'})}"></el-button></span>
      </div>
      <div class="moduleBack">
        <div class="moduleIcon">
          <div class="iconBox" @click="()=>{$router.push({name: 'students'})}">
            <i class="iconfont iconcz-role1"></i>
          </div>
        </div>
        <div class="moduleIcon">
          <div class="iconBox" @click="()=>{$router.push({name: 'books'})}">
            <i class="iconfont iconcz-rizhi1"></i>
          </div>
        </div>
         <div class="moduleIcon">
          <div class="iconBox" @click="()=>{$router.push({name: 'classes'})}">
            <i class="iconfont iconbanjiketang"></i>
          </div>
        </div>
      </div>
      <footer>Copyright@ Myzjr</footer>
  </div>
</template>

<script>

export default {
  name: 'module',
  data () {
    return {
      userInfo: {}
    }
  },
  computed: {

  },
  methods: {

  },
  created () {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
  }
}

</script>
<style lang="scss" scoped>
  .module{
    .header{
      width: calc( 100% - 40px);
      height: 21px;
      display: flex;
      justify-content: flex-end;
      margin: 20px;
      padding-bottom:20px;
      color:#707273;
      border-bottom: #d8d2d2 solid 1px;
      span{
        i{
          color:#6ebcdc;
          font-size:20px;
          padding-right:5px;
        }
        font-size: 16px;
        em{
          padding-left:5px;
          margin-right:10px;
        }
        button{

        }
      }
    }
    .moduleBack{
      display:flex;
      flex-direction: row;
      height: 60%;
      width: calc( 100% - 40px);
      margin: 40px 20px;
      opacity:1;
      background: url('/image/login.jpg') no-repeat;
      background-size: 100%,100%;
      box-shadow: 0px 0px 5px 2px #c0ccd8;
      border-radius:5px;
      .moduleIcon{
        display:flex;
        justify-content: center;
        align-items: center;
        width: 33.3%;
        .iconBox{
          border-radius:15px;
          padding:20px;
          color: rgba(255,255,255,0.7);
          border: solid rgba(255,255,255,0.7) 5px;
          &:hover{
            box-shadow:0px 0px 25px #ffffff;
            border: solid #ffffff 5px;
            color: #ffffff;
            text-shadow:0px 0px 25px #ffffff;
          }
          i{
            font-size: 75px;
          }
        }
      }
    }
    footer{
      text-align:center;
    }
  }
</style>
